import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
const target = ref(null)
// stop是一个可执行的方法 调用就会停止监听
// 不管元素进入还是离开视口区域都不会再执行回调函数
// 注意: 不会只监听一次 只有进入视口或者离开视口回调函数都会执行
export function useObserver (apiFn) {
  const { stop } = useIntersectionObserver(
  // 监听目标元素
    target,
    ([{ isIntersecting }], observeeElement) => {
    // isIntersecting 布尔值 代表当前监听的元素是否进入视口
      console.log('布尔', isIntersecting)
      // 判断 true就发送ajax
      if (isIntersecting) {
      // 发送网络请求
        apiFn()
        // 请求完毕停止监听
        stop()
      }
    },
    {
      // 一旦进入立刻触发
      threshold: 0
    }
  )
  // 返回dom
  return {
    target
  }
}
